<template>
   <div>
        <button @click="isShow = !isShow">显示/隐藏</button>
        <transition name="move" :appear="true">
            <h1 v-show="isShow">你好呀</h1>
        </transition>
   </div>
</template>
<script>
    export default {
        name:'Study',
        data(){
            return {isShow: true}
        }
    }
</script>
<style scoped>
    h1{
        background-color: orange;
    }
    .move-enter-active{
        animation: test 0.5s linear;
    }
    .move-leave-active{
        animation: test 0.5s linear reverse;
    }
    @keyframes test{
        from{
            transform: translateX(-100%);
        }
        to{
            transform: translateX(0px);
        }
    }
</style>